<template>
    <div class="content">
        <cl-crud @load="onLoad">
            <template #slot-btn>
                <el-button type="danger" size="mini" @click="batchFiled(0)" :disabled="selectRow.length > 0 ? false : true">批量拉黑</el-button>
                <el-button type="success" size="mini" @click="batchFiled(1)" :disabled="selectRow.length > 0 ? false : true">批量正常</el-button>
            </template>
            <template #slot-filter>
                <div class="filter-list">
                    <div class="filter-item">
                        <span class="filter-title">状态：</span>
                        <el-select
                                size="mini"
                                filterable
                                placeholder="请选择用户状态"
                                style="width: 140px"
                                v-model="selects.status"
                                @change="val => refresh({ status: val, page: 1 })"
                        >
                            <el-option value label="全部"></el-option>
                            <el-option label="封禁" value="0"></el-option>
                            <el-option label="正常" value="1"></el-option>
                        </el-select>
                    </div>
                </div>
            </template>
            <template #table-column-status="{ scope }">
                <el-tag v-if="scope.row.status === 1">正常</el-tag>
                <el-tag type="info" v-if="scope.row.status === 0">拉黑</el-tag>
            </template>
        </cl-crud>
    </div>
</template>

<script>
	export default {
		name: 'user',
		data() {
			return {
				selects: {
					status: '',
				},
				selectRow: []
			}
		},
		methods: {
			onLoad({ ctx, app }) {
				this.crud = app;
				ctx.service(this.$service.member.user)
					.set('search', {
						key: {
							placeholder: '请输入用户昵称、手机号码'
						}
					})
					.set('table', {
						columns: [
							{
								type: 'selection',
								label: '全选',
								align: 'center',
								width: '60px'
							},
							{
								label: '用户ID',
								prop: 'id',
								align: 'center'
							},
							{
								label: '用户昵称',
								prop: 'username',
								align: 'center',
							},
							{
								label: '手机号码',
								prop: 'phone',
								align: 'center'
							},
							{
								label: '完成订单数',
								prop: 'validOrderNum',
								align: 'center',
								sortable: 'custom'
							},
							{
								label: '注册时间',
								prop: 'createTime',
								align: 'center',
								sortable: 'custom'
							},
							{
								label: '最后登录时间',
								prop: 'visitTime',
								align: 'center',
								sortable: 'custom'
							},
							{
								label: '状态',
								prop: 'status',
								align: 'center'
							}
						],
						props: {
							'default-sort': {
								prop: 'createTime',
								order: 'descending'
							}
						},
						op: {
							layout: ['edit']
						},
						on: {
							'selection-change': selection => {
								this.selectRow = selection;
							}
						}
					})
					.set('upsert', {
						props: {
							title: '编辑用户',
							width: '500px',
							labelWidth: '120px'
						},
						items: [
							{
								prop: 'username',
                                label: '用户昵称：',
								component: {
									name: 'el-input',
									attrs: {
										placeholder: '请输入用户昵称',
										clearable: true
									}
								},
								rules: [
									{
										required: true,
										message: '用户昵称不能为空'
									}
								]
							},
							{
								prop: 'phone',
								label: '手机号码：',
								component: {
									name: 'el-input',
									attrs: {
										placeholder: '请输入手机号码',
										clearable: true
									}
								}
							},
							// {
							// 	prop: 'passwordNew',
							// 	label: '修改密码：',
							// 	component: {
							// 		name: 'el-input',
							// 		attrs: {
							// 			placeholder: '请输入新密码',
							// 			clearable: true,
                            //             'show-password': true
							// 		}
							// 	},
							// 	rules: [
							// 		{
							// 			validator: (rule, value, callback) => {
							// 				// 新旧密码一致时不校验密码
                            //                 let password = this.crud.getData('upsert.form.password');
							// 				if (password !== value) {
							// 					let reg = /(?!^[0-9]+$)(?!^[A-z]+$)(?!^[^A-z0-9]+$)^.{6,16}$/;
							// 					if (!reg.test(value)) {
							// 						callback(new Error('密码由6-16位数字，字母或符号组成，至少包含两种字符'));
							// 					} else {
							// 						callback();
							// 					}
                            //                 } else {
							// 					callback();
                            //                 }
							// 			}
							// 		}
							// 	]
							// },
							{
								prop: 'status',
								label: '状态：',
								value: 1,
								component: {
									name: 'el-radio-group',
									options: [
										{
											label: '正常',
											value: 1
										},
										{
											label: '拉黑',
											value: 0
										}
									]
								},
								rules: {
									required: true,
									message: '状态不能为空'
								}
							},
						]
					})
					// .on('open', (isEdit, form) => {
						// if (isEdit) {
						// 	app.setForm('passwordNew', form.password);
						// }
					// })
					.set('layout', [
						['refresh-btn', 'slot-btn', 'slot-filter', 'flex1', 'search-key'],
						['data-table'],
						['flex1', 'pagination']
					])
					.done();
				app.refresh();
			},
			refresh(params) {
				this.crud.refresh(params);
			},
            // 批量操作
			batchFiled(status) {
				let idsArr = [];
				this.selectRow.forEach(item => {
					idsArr.push(item.id);
                });
				this.$service.comm.batchFiled({
					repository: 'user_default',
					status: status,
                    ids: idsArr.join(',')
				}).then(() => {
					this.crud.refresh();
                })
            },
			// onSwitchChange(e, item) {
			// 	this.$service.member.user.update({
			// 		id: item.id,
			// 		status: e
			// 	}).then(() => {
			// 		this.crud.refresh();
			// 	}).catch(err => {
			// 		this.$message.error(err);
			// 	});
			// },
		}
	};
</script>

<style lang="stylus" scoped></style>